<template>
	<view class="register">
		<view class="img-a">
			<view class="t-b">
				您好,
				<br />
				您可以通过验证手机号重置密码！
			</view>
		</view>
		<view class="register-view">
			<view class="t-register">
				<uni-forms class="cl" :modelValue="dataForm" :rules="rules" validate-trigger="bind">
					<uni-forms-item name="userName">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">手机号</text>
						</view>
						<uni-easyinput type="number" maxlength="11" :inputBorder="false" v-model="dataForm.userName" placeholder="请输入手机号"
							prefix-icon="person" />
					</uni-forms-item>
					<uni-forms-item>
						<view style="margin-bottom: 40rpx;">
							<text class="txt">验证码</text>
						</view>
						<view class="verification-content">
						    <uni-easyinput v-model="dataForm.verificationCode" type="number" maxlength="6" placeholder="请输入验证码" :inputBorder="false"/>
							<button @click="getcode" class="btn-submit" :disabled="forbidden">{{getCodeText}}</button>
						</view>
					</uni-forms-item>
					<uni-forms-item name="password">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">密码</text>
						</view>
						<uni-easyinput type="password" :inputBorder="false" v-model="dataForm.password" placeholder="请输入6-12位英文或数字"
							prefix-icon="locked" maxlength="12"/>
					</uni-forms-item>
					<view style="padding-top: 40rpx;padding-bottom: 24rpx;">
						<button class="btn-submit" type="warn" @click="submit">确认</button>
						<navigator class="reg" url="/pageSubOne/login/login">返回登陆页</navigator>
					</view>
				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				forbidden:false,
				getCodeText:"获取验证码",
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				dataForm: {
					userName: '',
					password: '',
					verificationCode:''
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
				}
			}
		},
		methods: {
			getcode(){
				const regex = /^1[3456789]\d{9}$/;
				if(regex.test(this.dataForm.userName)){
					this.$http({
						url: '/sendCode?phone='+this.dataForm.userName,
						method: 'get'
					}).then(() => {
						uni.showToast({
							title: "验证码已发送！",
							icon: 'none'
						})
						this.setTimer()
					})
				}else{
					uni.showToast({
						title: "请输入正确的手机号！",
						icon: 'none'
					})
					return;
				}
			},
			setTimer() {
				this.forbidden = true
				let holdTime = 60;
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.forbidden = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			submit(){
				if(this.dataForm.userName == ""
				|| this.dataForm.verificationCode == "" 
				|| this.dataForm.password == ""
				){
					uni.showToast({
						title: "手机号,验证码或密码不能为空",
						icon: 'none'
					})
					return;
				}
				this.$http({
					url: '/forgetPwd',
					data: this.dataForm,
					method: 'PUT'
				}).then(() => {
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					})
					uni.navigateBack({})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/styles/variables.scss';

	.register {
		height: 100vh;
		background: #fff;

		.img-a {
			width: 100%;
			height: 450rpx;
			background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
			background-size: 100%;
		}

		.t-b {
			text-align: left;
			font-size: 42rpx;
			color: #ffffff;
			padding: 130rpx 0 0 70rpx;
			font-weight: bold;
			line-height: 70rpx;
		}

		.register-view {
			width: 100%;
			position: relative;
			margin-top: -120rpx;
			background-color: #ffffff;
			border-radius: 64rpx 64rpx 0% 0;

			.t-register {
				width: 600rpx;
				margin: 0 auto;
				font-size: 28rpx;
				padding-top: 100rpx;
				
			}
			
			uni-button:after{
				border: none !important;
			}
			
			button::after{
				border: none !important;
			}

			.btn-submit {
				font-size: 28rpx;
				background: #2796f2;
				color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				font-weight: bold;
			}

			.reg {
				font-size: 28rpx;
				color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				font-weight: bold;
				background: #f5f6fa;
				color: #000000;
				text-align: center;
				margin-top: 30rpx;
			}

			.cl {
				zoom: 1;
			}

			.cl:after {
				clear: both;
				display: block;
				visibility: hidden;
				height: 0;
				content: '\20';
			}

			::v-deep .uni-easyinput {
				border-bottom: 1px solid #eee;
			}
		}

		.txt {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.title {
			font-size: 25px;
			font-weight: bold;
			color: $color-black;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20px;
			gap: 10px;
		}

		.form {
			padding: 20rpx;
		}
		.verification-content{
			display: flex;
			align-items: center;
			// border: 1px solid red;
		}
	}
</style>